<template>



  <!-- Profile Information Card -->
	<a-card :bordered="false" class="header-solid h-full card-profile-information" :bodyStyle="{paddingTop: 0, paddingBottom: '16px' }" :headStyle="{paddingRight: 0,}">
    <el-dialog
        title="个人信息修改"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"  class="radius">
      <span>
        <el-form ref="form" :model="userDetails" label-width="80px">
          <el-form-item label="真实姓名">
            <el-input v-model="userDetails.realName"></el-input>
          </el-form-item>
           <el-form-item label="联系方式">
            <el-input v-model="userDetails.contact"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="userDetails.email"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="userDetails.location"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
    </el-dialog>
    <template #title>
			<h6 class="font-semibold m-0">个人信息</h6>
		</template>
		<a-button type="link" slot="extra" @click="edit">
			<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path class="fill-muted" d="M13.5858 3.58579C14.3668 2.80474 15.6332 2.80474 16.4142 3.58579C17.1953 4.36683 17.1953 5.63316 16.4142 6.41421L15.6213 7.20711L12.7929 4.37868L13.5858 3.58579Z" fill="#111827"/>
				<path class="fill-muted" d="M11.3787 5.79289L3 14.1716V17H5.82842L14.2071 8.62132L11.3787 5.79289Z" fill="#111827"/>
			</svg>
		</a-button>

		<a-descriptions title="" :column="1">
			<a-descriptions-item label="真实姓名">
        {{ realName }}
			</a-descriptions-item>
			<a-descriptions-item label="联系方式">
        {{ contact }}
			</a-descriptions-item>
			<a-descriptions-item label="邮箱">
        {{ email }}
			</a-descriptions-item>
			<a-descriptions-item label="地址">
				{{location}}
			</a-descriptions-item>
      <a-descriptions-item label="用户组">
        {{role}}
      </a-descriptions-item>
		</a-descriptions>
	</a-card>
	<!-- / Profile Information Card -->

</template>

<script>

	export default ({
		props:{
      realName:{
        type: String,
        default: null,
        required: true
      },
      contact:{
        default: "-"
      },
      email:{
        default: "-"
      },
      location:{
        default: "-"
      },
      role:{
        defalut: "-"
      },
      userId:{
        default: "-"
      }
    },
    data() {
			return {
        dialogVisible: false,
        userDetails:{
          userId:'',
          realName: '',
          contact: '',
          email: '',
          location: '',
        }
			}
		},
    methods:{
      edit(){
        this.userDetails.userId = this.userId
        this.userDetails.realName = this.realName
        this.userDetails.contact = this.contact
        this.userDetails.email = this.email
        this.userDetails.location = this.location
        // this.$parent.$parent.$parent.editProfile()
        this.dialogVisible = true
      },
      submit(){
        this.$axios({
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
            "Authorization": sessionStorage.getItem("systemToken")
          },
          url: "/api/userDetails/changeUserDetails", //后端请求的路径
          method: "post",
          data: this.userDetails,
        }).then((response) => {
          console.log(response.data)
          if (response.data.status !== 0) {
            this.$notify({
              title: '抱歉',
              message: '系统出现问题请稍后再试',
              type: 'warning'
            });

          }else if (response.data.status === 0){
            this.$notify({
              title: '修改成功',
              message: '您的信息已经修改完毕',
              type: 'success'
            });
            this.dialogVisible = false
            this.$router.go(0)
          }
        });
      }
    }
	})

</script>

<style lang="scss" scoped>
.radius{
  /deep/.el-dialog{
    border-radius: 15px;
  }
}
</style>